<template>
  <div class="qwe">
    <ul class="list">
      <li v-for="(v, i) in list" :key="i" >
        <router-link :to="`/songlist/${v.id}`">
          <img :src="v.coverImgUrl" />
          <p
            @mouseover="addline($event)"
            @mouseout="removeline($event)"
            class="a"
          >
            {{ v.name }}
          </p>
        </router-link>
        <span class="aaa">
          <span>by&nbsp;</span>
          <span @mouseover="addline($event)" @mouseout="removeline($event)" class="a">
            <router-link to="#">
              {{ v.creator.nickname }}
            </router-link>
          </span>
        </span>
        <div>
          <span>Q{{ changenumber(v.playCount) }}</span>
          <router-link to="#"><span class="iconfont icon-bofang"></span></router-link>
        </div>
      </li>
    </ul>
    <div class="pagination">
      <el-pagination
        background
        :page-size="limit"
        layout="prev, pager, next"
        :total="num"
        @prev-click="prev"
        @next-click="next"
        @current-change="change"
      >
      </el-pagination>
    </div>
<router-view></router-view>
  </div>
</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
      num: 0,
      limit: 35,
      offset: 0,
      list: {},
      id:''
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取歌单数据
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/top/playlist?limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.list = res.data.playlists;
          this.num = res.data.total
          this.id = res.data.playlists.id
        });
    },
    // 下一页
    prev() {
      this.offset -= 35;
      this.getData();
      // 锚点定位
      document.querySelector("body").scrollIntoView({
        block: "start" // 上边框与视窗顶部部平齐
      });
    },
    // 上一页
    next() {
      this.offset += 35;
      this.getData();
      // 锚点定位
      document.querySelector("body").scrollIntoView({
        block: "start" // 上边框与视窗顶部部平齐
      });
    },
    change(p) {
      this.offset = (p - 1) * 35;
      this.getData();
      // 锚点定位
      document.querySelector("body").scrollIntoView({
        block: "start" // 上边框与视窗顶部部平齐
      });
    },
    addline($event) {
      $event.currentTarget.style.textDecoration = "underline";
    },
    removeline($event) {
      $event.currentTarget.style.textDecoration = "none";
    },
    // 转化播放次数
    changenumber(e){
      if(e<100000){
        return e
      }else{
       return Math.floor(e / 10000)+"万"
      }
    }
  },
};
</script>
<style scoped>
.qwe {
  width: 100%;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.list li {
  width: 20%;
  padding: 0 20px 30px;
  position: relative;
}

.line {
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
}
.list li .a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list li p{
  font-size: 14px;
}
.list li .aaa{
  display: flex;
  margin-top: 5px;
}
.list li .aaa span{
font-size: 12px;
color: #999999;
}
.list li img {
  width: 140px;
  height: 140px;
}
.list li div {
  position: absolute;
  top: 115px;
  left: 20px;
  width: 140px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #cacaca;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
}
.list li div a {
  color: #cacaca;
}
.pagination {
  display: flex;
  justify-content: center;
}

.pagination
  >>> .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #c40a0f !important;
}
</style>